<template>
  <div>
    <el-form ref="form" :model="form"  :rules="dataRule" label-width="120px">
        <el-form-item label="连接名称：" prop="name">
            <el-input v-model="form.name" ></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="10">
            <p style="line-height: 30px;">连接类型：</p>
            <div style="border: 1px solid #828790; height: 294px; overflow: auto;">
              <ul>
                <li v-for="(item, index) in databaseTypes" :key="index" style="height: 30px; line-height: 30px; cursor: pointer; text-indent: 5px;" @click="setStyle(index, item)" ref="modelDeployStyle">{{ item.name }}</li>
              </ul>
            </div>
          </el-col>
          <el-col :span="14">
            <div class="box" title="设置" style="margin-left:30px;margin-top:20px;">
              <el-form-item label="主机名称：" prop="hostname">
                  <el-input v-model="form.hostname"></el-input>
              </el-form-item>
              <el-form-item label="数据库名称：" prop="dbName">
                  <el-input v-model="form.dbName"></el-input>
              </el-form-item>
              <el-form-item label="端口号：" prop="dbPort">
                  <el-input v-model="form.dbPort"></el-input>
              </el-form-item>
              <el-form-item label="用户名：" prop="username">
                  <el-input v-model="form.username"></el-input>
              </el-form-item>
              <el-form-item label="密码：" prop="password">
                  <el-input type="password" v-model="form.password"></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
    </el-form>
    <div class="el-dialog__footer">
        <span class="dialog-footer">
            <el-button @click="closeDialog">取 消</el-button>
            <el-button type="primary" @click="submit">确 定</el-button>
        </span>
    </div>
  </div>
</template>

<style lang="scss">
.modelDeployStyle {
    background: #3399ff;
    color: #fff;
}
.box{
    position:relative;
    border:1px solid #dcdfe6;
    padding:10px 10px;
}
.box::before{
    content:attr(title);
    position:absolute;
    top: 0%;
    left:15%;
    transform:translateX(-50%);
    -webkit-transform:translate(-50%,-50%);
    padding:0px 10px;
    background-color:#fff;
}
</style>

<script>
/* eslint semi: ["error", "always"] */
// @ is an alias to /src
import API from '../../api';
export default {
  name: 'databaseDialog',
  data () {
    return {
      form: {
        name: '',
        databaseType: '',
        dbName: '',
        dbPort: '',
        hostname: '',
        password: '',
        username: ''
      },
      databaseTypes: [],
      dataRule: {
        username: [
          {required: true, message: '用户名不能为空', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '密码不能为空', trigger: 'blur'}
        ],
        name: [
          {required: true, message: '连接名称不能为空', trigger: 'blur'}
        ],
        dbName: [
          {required: true, message: '数据库名称不能为空', trigger: 'blur'}
        ],
        dbPort: [
          {required: true, message: '端口不能为空', trigger: 'blur'}
        ],
        hostname: [
          {required: true, message: '主机名称不能为空', trigger: 'blur'}
        ]
      }
    };
  },
  methods: {
    setStyle (index, item) {
      for (const i of this.$refs.modelDeployStyle) {
        i.setAttribute('class', '');
      }
      this.$refs.modelDeployStyle[index].setAttribute('class', 'modelDeployStyle');
      if (item) {
        this.form.databaseType = item.code;
      }
    },
    getSchemaList () {
      API.database.database().then(res => {
        this.databaseTypes = res.data;
      }).catch(error => {
        const errorResultData = error.response.data;
        this.$message({
          message: errorResultData.error.message,
          type: 'warning'
        });
      });
    },
    closeDialog () {
      this.$emit('closeDialog');
    },
    async submit () {
      let flag = false;
      this.$refs['form'].validate((valid) => {
        if (valid) {
          flag = true;
        }
      });
      if (this.form.databaseType) {
        if (flag) {
          API.database.create(this.form).then(res => {
            if (res.data.code === 1) {
              this.$message({
                message: '保存成功',
                type: 'success'
              });
              this.$emit('closeDialog');
            }
          });
        }
      } else {
        this.$message({
          message: '选择数据录类型',
          type: 'warning'
        });
      }
    }
  },
  mounted () {
    this.getSchemaList();
  }
};
</script>
